<template>
  <div class="infinite-list-wrapper" style="overflow:auto">
    <div class="imgBox"
         v-infinite-scroll="load"
         :infinite-scroll-disabled="disabled">
      <div class="wrap is-check" v-for="(item, index) in newList" :key="item.id" :style="imgStyle"
           @click="onCheck(item)">
        <el-image
          style="width: 100%; height: 100%;"
          :src="item.url"
          :fit="fit"></el-image>
        <label class="status-label" v-if="item.check">
          <i class="el-icon-check check-success"></i>
        </label>
      </div>
    </div>
    <div style="width: 100%"
         v-if="loading"
         v-loading="loading"
         :element-loading-text="loadingText"
         element-loading-spinner="el-icon-loading"></div>
    <div v-if="noMore" style="opacity: 0.5; margin: 0 10px; width: calc( 100% - 20px )">
      <el-divider>{{noMoreText}}</el-divider>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    components: {},
    props: {
      // 图片如何适应容器框
      fit: {
        type: String,
        default: 'cover'
      },
      imgStyle: {
        type: Object,
        default: () => {
          return {
            width: '120px',
            height: '120px'
          }
        }
      },
      loadingText: {
        type: String,
        default: '拼命加载中'
      },
      noMoreText: {
        type: String,
        default: '我也是有底线的'
      },
      // 图片数据
      list: {
        type: Array,
        required: true
      },
      // 请求地址
      url: {
        type: String,
        required: true
      },
      params: Object,
      // 是否分页 默认分页
      isPage: {
        type: Boolean,
        default: true
      },
      // 每页条数
      limit: {
        type: Number,
        default: 12
      }
    },
    data() {
      return {
        loading: false,
        noMore: false,
        newList: [],
        listData: [],
        total: 0, // 总条数
        pageNo: 0, // 当前页码
        pages: 0 // 总页数
      }
    },
    watch: {
      list(val) {
        this.newList = val
        // arr.length 控制单选 多选 暂不考虑
        // let arr = val.filter(item => item.check)
      }
    },
    computed: {
      disabled() {
        return this.loading || this.noMore
      }
    },
    mounted() {
    },
    methods: {
      /**
       * 触底加载后 已选中的数据 会丢失 暂未处理
       **/
      load() {
        this.loading = true
        setTimeout(() => {
          this.pageNo += 1
          this.getData()
        }, 2000)
      },
      // 请求数据
      getData() {
        let params = {}
        // this.loading = true
        if (!this.isPage) {
          // 不分页
          params = {
            ...this.params
          }
        } else {
          params = {
            ...this.params,
            limit: this.limit,
            page: this.pageNo
          }
        }
        this.$http.get(this.url, params, this).then((res) => {
          if (!this.isPage) {
            // 不分页
            this.listData = res.data
            this.noMore = true
            // 执行自定义回调
            this.$emit('on-load', res.data)
          } else {
            let data = res.data.records, pages = parseInt(res.data.pages)
            // 总记录
            this.total = parseInt(res.data.total)
            this.pages = pages
            this.listData = data
            this.noMore = this.pageNo >= pages && data.length <= this.limit
            // 执行自定义回调
            this.$emit('on-load', res.data.records)
          }
          this.loading = false
        }).catch(err=>{
          console.log('接口出错啦')
        })
      },
      // 查询
      search(num) {
        this.pageNo = num || 0
        this.load()
      },
      // 选择
      onCheck(data) {
        const {newList} = this
        const {id} = data
        this.newList = newList.map(item => {
          if (item.id === id) {
            return {...item, check: true}
          } else {
            return {...item, check: false}
          }
        })
        this.$emit('on-check', data)
      },
      // 重置
      reset() {
        this.loading = false
        this.noMore = false
      }
    }
  }
</script>

<style scoped>
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #F5F5F5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: #c8c8c8;
  }

  .infinite-list-wrapper {
    height: 280px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .imgBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
  }

  .imgBox .wrap {
    margin: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }

  .is-check .status-label {
    position: absolute;
    right: -17px;
    top: -7px;
    width: 46px;
    height: 26px;
    background: #13ce66;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 1px 1px #ccc;
  }

  .is-check .check-success {
    color: #fff;
    font-size: 12px;
    margin-top: 12px;
    transform: rotate(-45deg);
  }

</style>
